<template>
  <div class="orderlist" style="width:1140px;height:98%">
    <div class="orderlist_title" style="display:flex;">
    <h2 class="" style="">订单信息</h2>
    <div class="orderlist_right">

      <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="待接单" name="first">

  </el-tab-pane>

    <el-tab-pane  label="待派送" name="second">

        <!-- <Waitsendorder></Waitsendorder> -->
    </el-tab-pane>

      </el-tabs>
      </div>

    </div>

    <!-- 正文 -->
      <div v-if="pending_orders">
          <Waitorder :tableData="tableData2" @refresh="refresh" ></Waitorder>

       </div>

         <!--表格 待派送 -->
        <div v-else-if="wait_send_orders">
          <Waitsendorder  :tableData="tableData2"  @refresh="refresh">  </Waitsendorder >

         </div>
   <!-- 分页 -->
        <div class="pagination">
         <el-pagination
          background
          layout="total,sizes,prev,pager,next,jumper"
         :current-page="page"
           :page-size="pageSize"
          :page-sizes="[5, 10]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :total="totals"
            ></el-pagination>
         </div>
   <!--  <div class="orderlist_Box" style="">
        <div v-if="dataList"></div>
        <div style="padding-left:25%;padding-top:10%" v-else><img src="@/assets/table_empty.png" alt=""></div>
    </div> -->
  </div>
</template>

<script>
import Waitorder from '@/components/main/order/waitorder.vue'
import Waitsendorder from '@/components/main/order/waitsendorder.vue'
import { queryOrder } from '@/api/order'

import moment from 'moment'
export default {
  name: 'orderlistIndex',
  components: {
    Waitorder,
    Waitsendorder
  },
  data () {
    return {
      tableData2: [],

      activeName: 'first',

      searchForm: {
        number: '',
        phone: ''

      },
      // 待接单
      pending_orders: true,

      // 待派送
      wait_send_orders: false,
      /* 分页 */
      page: 1,
      pageSize: 5,
      pagelimit: 5,
      totals: 0,
      statu: 2

    }
  },
  mounted () {
    this.queryorders(2)
  },
  methods: {
    handleClick (tab, event) {
      if (event.target.innerText === '待派送') {
        //
        this.statu = 3
        this.page = 1
        this.queryorders(3)
        this.pending_orders = false
        this.wait_send_orders = true
      } else if (event.target.innerText === '待接单') {
        //
        this.page = 1
        this.statu = 2
        this.queryorders(2)
        this.wait_send_orders = false
        this.pending_orders = true
      }
    },
    async queryorders (status) {
      this.statu = status
      this.searchForm.startTime = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss')
      this.searchForm.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
      this.searchForm.page = this.page
      this.searchForm.pageSize = this.pageSize
      this.searchForm.status = status

      // 查询订单
      const res = await queryOrder(this.searchForm)
      console.log(res, 'queryorders')
      this.tableData2 = res.data.records
      this.totals = res.data.total
    },
    // 子组件刷新页面
    refresh (status) {
      this.statu = status
      this.queryorders(status)
    },

    handleSizeChange (val) {
    // 更新当前页码展示数量

      this.pageSize = val
      this.queryorders(this.statu)
    },
    handleCurrentChange (val) {
    // 更新当前页码是第几页

      this.page = val
      this.queryorders(this.statu)
    }
  }
}
</script>

<style lang="less" scoped>
.body{
  background-color: rgb(255,255,245);
}
.orderlist{
  /* 水平阴影位置 | 垂直阴影位置 | 模糊距离 | 阴影的颜色 */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.048);
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 20px;

}
.orderlist_ovvern{
  background-color: orange;
   padding-left: 25px;
   padding-right: 25px;
   padding-top: 5px;
   padding-bottom: 5px;
border: 2px solid rgba(73, 73, 73, 0.062)
}
.orderlist_ovvern1{

   padding-left: 25px;
   padding-right: 25px;
   padding-top: 5px;
   padding-bottom: 5px;
   border: 2px solid rgba(73, 73, 73, 0.062)

}
.orderlist_right{
 margin-left: 65%;

}
 /deep/ .el-tabs__nav-scroll{
  width: 300px;
}

 /deep/.el-tabs__nav-wrap::after {
   // 去掉下划线
      position: static !important;
  }

 /deep/ .el-tabs__item.is-top.is-active{

     font-size: 16px;
    color: black;
    font-weight: 600;
     // 选中变色
     background-color: rgb(255,165,0);

     //width: 120px;
}

  /deep/ .el-tabs__active-bar {
  display: none; /* 隐藏激活标签的下划线 */

  }

/deep/ .el-tabs__nav.is-top{
   background-color: white;
  // width:242px;

}
/* 去掉左括号 */ /* 强制移除样式 */
/* /deep/ .el-icon-arrow-left::before {

  display: none !important;

}
/deep/ .el-icon-arrow-right::before{

display: none !important;

} */
 /deep/ .el-tabs__active-bar.is-top{
   display: none !important; /* 强制移除样式 */
}

 /deep/ .el-tabs__item:hover {
   //去掉鼠标悬停的效果
  color: inherit !important;
  cursor: default !important;
}

    /deep/ #tab-first{

    padding-left: 35px;
    padding-right: 45px;

    font-size: 16px;
    border: 1px solid rgba(0, 0, 0, 0.048);

  }

   /deep/ #tab-second{

      padding-left: 35px;
    padding-right: 45px;
      font-size: 16px;
     border: 1px solid rgba(0, 0, 0, 0.048);

  }
</style>
